<template>
  <div class="animate__animated animate__fadeInUp">
    <!-- 系统设置成员管理导航栏 -->
    <div class="datr animate__animated animate__fadeInUp animate__delay-0.5s">
      <p class="ga"></p>
      <span class="chryu">广告管理</span>
    </div>
    <el-card shadow="never">
      <!-- 系统设置成员管理搜索查询添加 -->
      <div
        class="d-flex animate__animated animate__fadeInUp animate__delay-0.9s"
      >
        <p>
          <el-input placeholder="广告名称" v-model="input" clearable>
          </el-input>
        </p>

        <!-- 查询日期 -->
        <div class="block ml-1">
          <el-date-picker
            v-model="value2"
            type="datetime"
            placeholder="选择日期时间"
            align="right"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </div>

        <!-- 查询按钮 -->
        <p class="ml-1">
          <el-button
            type="primary"
            icon="el-icon-search"
            :loading="isloading"
            @click="mohuchaxu"
            >查询</el-button
          >
        </p>
        <!-- 添加广告 -->
        <p class="ml-1">
          <el-button plain @click="advertisementaddition">添加广告</el-button>
        </p>
      </div>
      <!-- 表格渲染 -->
      <p class="mt-1">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          border
          :row-key="getRowKey"
          :header-cell-style="{ textAlign: 'center' }"
          :cell-style="{ textAlign: 'center' }"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            align="center"
            type="selection"
            :reserve-selection="true"
            width="80"
          >
          </el-table-column>
          <el-table-column label="编号" width="80">
            <template slot-scope="scope">{{ scope.row.id }}</template>
          </el-table-column>
          <el-table-column prop="name" label="广告名称" width="130">
          </el-table-column>
          <el-table-column
            prop="position"
            label="广告位置"
            show-overflow-tooltip
            width="130"
          >
          </el-table-column>

          <el-table-column width="130" label="广告图片" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.image"
                fit="cover"
              >
                <!--  v-for="v in scope.row.img" :key="i" -->
              </el-image>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="时间" show-overflow-tooltip>
            <template slot-scope="scope"
              ><p>开始时间：{{ scope.row.startTime }}</p>
              <p>结束时间：{{ scope.row.endTime }}</p></template
            >
            <!-- <template slot-scope="scope"></template> -->
          </el-table-column>
          <el-table-column
            prop="status"
            label="上线/下线"
            show-overflow-tooltip
            width="100"
          >
          </el-table-column>

          <el-table-column
            width="100"
            prop="num"
            label="点击次数"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="advertisingeditor(scope, scope.$index, tableData)"
                >编辑</el-button
              >
              <el-button @click="open(scope.row)" type="text" size="small"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </p>
      <!-- 底边栏多选框 -->
      <div class="d-flex v-center">
        <div style="margin-top: 20px">
          <el-button @click="toggleSelection(tableData)">反选</el-button>
          <el-button @click="toggleSelection()">取消选择</el-button>
        </div>
        <p class="mt-2 ml-1">
          <el-select v-model="value" clearable placeholder="批量操作">
            <el-option
              v-for="item in plcz"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </p>
        <p class="mt-2 ml-1">
          <el-row>
            <el-button @click="piliangcaozuo()">确定</el-button>
          </el-row>
        </p>
      </div>
      <!-- 页码-->
      <div class="t-right">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="limit"
          :total="total"
          @current-change="diji"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>
<script>
import moment from "moment";
moment.locale("zh-cn");
export default {
  data() {
    return {
      leng: 0, //数据的长度

      //查询两个数据框的值
      input: "", //查询输入框的
      value2: "", //查询时间的值
      // 多选框
      data: [],
      limit: 3, //广告渲染页数
      total: 0, //广告渲染总数数
      page: 1, //当前页
      isloading: false, //搜索框图标显示

      value: "", //下拉框的值
      multipleSelection: [], //表格多选框数组
      value2: "", //时间定义
      fit: "contain",
      status: null,

      //   渲染表格
      tableData: [],
      // 批量操作
      plcz: [
        {
          value: "上线",
          //   label: "黄金糕",
        },
        {
          value: "下线",
          //   label: "双皮奶",
          //   disabled: true,
        },
        {
          value: "删除",
          //   label: "蚵仔煎",
        },
      ],

      // 时间数据

      pickerOptions: {
        // disabledDate(time) {
        //   return time.getTime() > Date.now();
        // },

        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
    };
  },
  methods: {
    //批量多页面的操作
    getRowKey(row) {
      return row.id;
    },
    //点击页面函数
    diji(page) {
      // console.log(page)
      this.page = page;
      this.chaXun();
      // this.total=this.tableData.length
      // console.log(this.page,this.total)
    },
    // 多选框函数
    toggleRowSelection(row, selected) {
      console.log(row, selected);

      
    },
    toggleSelection(rows) {
      // this.multipleSelection=this.tableData;

      // console.log(this.multipleSelection);
      if (rows) {
        //     rows.forEach((row) => {
        //       this.$refs.multipleTable.toggleAllSelection(row);   全选全不选
        //     });
       
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row); //反选
        });
        // console.log(this.$refs.multipleTable.toggleRowSelection())
        //  console.log(rows,888)
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    this.multipleSelection = [];
    this.multipleSelection=rows
    },
    // 多选选中的数据
    handleSelectionChange(val) {
      this.multipleSelection = [];
      this.multipleSelection = val;
      // console.log(this.multipleSelection,val)
    },
    // 添加成员
    advertisementaddition() {
      this.$router.push("advertisementaddition");
    },
    // 成员编辑
    advertisingeditor(scope, index, tableData) {
      console.log(scope.row);
      this.$router.push({
        path: "advertisingeditor",
        name: "AdvertisingEditor",
        params: { user: scope.row.id },
      });
    },
    // 删除
    open(v) {
      console.log(v);
      //  this.dialogFormVisible = true;
      this.$confirm("确定要删除该广告吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios({
            url: "/gym/advertisement/deleteById",
            method: "post",
            data: {
              id: v.id,
            },
          })
            .then((res) => {
              this.chaXun();
              if (
                (res.data.code >= 200 && res.data.code < 300) ||
                res.data.code == 304
              ) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                // console.log(this.leng,55555)
                if (this.leng - 1 == 0) {
                  this.page--;
                }
                if (this.page <= 1) {
                  this.page = 1;
                }
                this.chaXun();
              } else {
                this.$message.error("删除失败");
              }
            })
            .catch(() => {});
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    // 查询函数
    chaXun() {
      // console.log(111);
      this.$axios({
        url: "/gym/advertisement/list",
        method: "post",
        data: {
          page: this.page,
          limit: this.limit,
        },
      }).then((res) => {
        this.leng = res.data.data.length;
        console.log(this.leng);
        this.tableData = res.data.data;
        if (this.tableData == []) {
          this.page--;
        }
        if (this.page <= 1) {
          this.page = 1;
        }
        for (let i in this.tableData) {
          this.tableData[i].status =
            this.tableData[i].status == 0 ? "下线" : "上线";
          // console.log(this.tableData[0].status)
        }
        // console.log(this.tableData);
        this.total = res.data.count;
        for (let t in this.tableData) {
          this.tableData[t].endTime = moment(this.tableData[t].endTime).format(
            "YYYY-MM-DD HH:mm:ss:ms"
          );
          this.tableData[t].startTime = moment(
            this.tableData[t].startTime
          ).format("YYYY-MM-DD HH:mm:ss:ms");
        }
        // console.log(moment("2021-06.08 8:25:12").format("x"))
      });
    },

    //模糊查询
    mohuchaxu() {
      // console.log(this.input);
      // console.log(2222222,this.value2 == "Invalid date",this.value2)

      if (
        (this.value2 == "" || this.value2 == "Invalid date") &&
        this.input == ""
      ) {
        this.chaXun();
      } else if (this.value2 == "" || this.value2 == "Invalid date") {
        // console.log(this.value2)
        this.value2 = moment(this.value2).format("x");
        // console.log(this.value2)
        this.value2 = "";
        this.$axios({
          url: "/gym/advertisement/list",
          method: "post",
          data: {
            page: this.page,
            limit: this.limit,
            time: this.value2,
            name: this.input,
          },
        }).then((res) => {
          if (
            (res.data.code >= 200 && res.data.code < 300) ||
            res.data.code == 304
          ) {
            this.tableData = res.data.data;
            for (let i in this.tableData) {
              this.tableData[i].status =
                this.tableData[i].status == 0 ? "下线" : "上线";
              // console.log(this.tableData[0].status)
            }
            // console.log(this.tableData);
            this.total = res.data.count;
            for (let t in this.tableData) {
              this.tableData[t].endTime = moment(
                this.tableData[t].endTime
              ).format("YYYY-MM-DD HH:mm:ss:ms");
              this.tableData[t].startTime = moment(
                this.tableData[t].startTime
              ).format("YYYY-MM-DD HH:mm:ss:ms");
            }
            // console.log(111);
            this.$message({
              type: "success",
              message: "查询成功!",
            });
          } else {
            this.$message.error("查询失败");
          }

          // console.log(moment(1625642112000).format("YYYY-MM-DD HH:mm:ss:ms"))
        });
      } else {
        this.value2 = moment(this.value2).format("x");

        this.$axios({
          url: "/gym/advertisement/list",
          method: "post",
          data: {
            page: this.page,
            limit: this.limit,
            time: this.value2,
            name: this.input,
          },
        }).then((res) => {
          // console.log(this.value2);
          // console.log(res);
          if (
            (res.data.code >= 200 && res.data.code < 300) ||
            res.data.code == 304
          ) {
            this.tableData = res.data.data;
            for (let i in this.tableData) {
              this.tableData[i].status =
                this.tableData[i].status == 0 ? "下线" : "上线";
              // console.log(this.tableData[0].status)
            }
            // console.log(this.tableData);
            this.total = res.data.count;
            for (let t in this.tableData) {
              this.tableData[t].endTime = moment(
                this.tableData[t].endTime
              ).format("YYYY-MM-DD HH:mm:ss:ms");
              this.tableData[t].startTime = moment(
                this.tableData[t].startTime
              ).format("YYYY-MM-DD HH:mm:ss:ms");
            }
            this.$message({
              type: "success",
              message: "查询成功!",
            });
          } else {
            this.$message.error("查询失败");
          }

          // console.log(moment(1625642112000).format("YYYY-MM-DD HH:mm:ss:ms"))
        });
      }
    },
    // 批量操做
    piliangcaozuo() {

      // console.log(this.multipleSelection, 99999999);
      let ffff=[]
      for (let i = 0; i < this.multipleSelection.length; i++) {
        ffff.push(this.multipleSelection[i].id);
      };
     
      if (this.value == "下线") {
        this.value = 0;
      } else if (this.value == "上线") {
        this.value = 1;
      } else if (this.value == "删除") {
        this.value = 2;
      }
  // console.log(ffff,10000000000);
      // if (this.value == "") {
      //   this.$message.error("没有选操作项或者是没选操作内容");
      // }
      //  if{
          // console.log(ffff.length,3333333)
          //      console.log(this.leng)
      if (this.value == 0 || this.value == 1) {
        // console.log(this.multipleSelection, 5555555);
        this.$axios({
          url: "/gym/advertisement/condition",
          method: "post",
          data: {
            ids: ffff.toString(),
            condition: this.value,
            status: this.value,
          },
        })
          .then((res) => {
            if (
              (res.data.code >= 200 && res.data.code < 300) ||
              res.data.code == 304
            ) {
              this.value = "上线";
              // console.log(111);
              // this.multipleSelection = [];
              this.$message({
                type: "success",
                message: "操作成功!",
              });
              this.$refs.multipleTable.clearSelection();
              ffff=[]
              this.chaXun();
            } else {
              this.$message.error("操作失败");
            }
          })
          .catch(() => {});
      } else if (this.value == 2) {
        // console.log(this.multipleSelection, 66666);
        this.$axios({
          url: "/gym/advertisement/condition",
          method: "post",
          data: {
            ids: ffff.toString(),
            condition: this.value,
          },
        })
          .then((res) => {
            
            if (
              (res.data.code >= 200 && res.data.code < 300) ||
              res.data.code == 304
            ) {
              this.chaXun();
              this.value = "上线";
              // console.log(111);
              this.$message({
                type: "success",
                message: "操作成功!",
              });
                this.$refs.multipleTable.clearSelection();
               
              if (ffff.length==this.leng) {

                this.page--;
              }
              if (this.page <= 1) {
                this.page = 1;
                  
              }
              // this.$router.go(0);
            
                ffff=[];
              this.chaXun();
            } else {
              this.$message.error("操作失败");
            }
          })
          .catch(() => {});
      }
      // }
    },
    // 广告删除
  },
  // 创建前
  brforeCreate() {},
  // 创建后
  created() {},
  // 挂载前
  beforeMount() {
    this.chaXun();
  },
  // 挂载后
  mounted() {
    // this.diji()
    // console.log(55555);
  },
  // 数据更新前
  beforeUpdate() {},
  // 数据更新后
  updated() {},
  // 销毁前
  beforeDestroy() {},
  // 销毁后
  destroyed() {},
};
</script>

<style scoped lang="less">
// 导航栏css
.datr {
  display: flex;
  align-items: center;
  width: 100%;
  height: 50px;
  background: linear-gradient(
    to right,
    rgba(17, 17, 17, 0.619),
    rgba(14, 13, 13, 0.251)
  );
  border-radius: 8px 8px 0px 0px;

  .ga {
    display: flex;
    align-items: center;
    width: 5px;
    height: 35px;
    background-color: rgba(0, 0, 255);
    // line-height: 50px;
    margin-left: 10px;
  }
  .chryu {
    display: inline-block;
    width: 80px;
    height: 50px;
    line-height: 50px;
    color: rgb(247, 243, 243);
    font-size: 17px;
    font-weight: bold;
  }
}
// 图片
</style>